import React, { useEffect, useState } from "react";
import { Toast } from "antd-mobile";
import { useHistory } from "react-router-dom";
import { getAuthorization } from "./axios";
import ajax from "./axios";
import Nav from "./componemts/Nav";
const my_top = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_top.png";
const my_1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_1.png";
const my_2 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_2.png";
const my_3 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_3.png";
const my_4 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_4.png";
const top1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top1.png";
const top2 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top2.png";
const top3 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top3.png";
const top4 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top4.png";
const top5 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top5.png";
const top6 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/top6.png";

function Home() {
  // const history = useHistory();
  const [data] = useState(JSON.parse(getAuthorization()));
  const X = "https://lcz-luoxin.oss-cn-beijing.aliyuncs.com/x.png";
  const [userData, setData] = useState({});
  const UserImg = (str) => {
    if (!str) return " ";
    const a =
      Array.from(str)
        .map((c, idx) => c.charCodeAt(0) * ((idx % 6) + 1))
        .reduce((n1, n2) => n1 + n2) % 6;
    return a; //颜色
  };
  const imgS = {
    0: top1,
    1: top2,
    2: top3,
    3: top4,
    4: top5,
    5: top6,
  };
  const [list, setList] = useState();
  const [kuang, setKuang] = useState();
  const onIifo = () => {
    ajax("get", "/file/activityTypes").then((res) => {
      if (res.code == 0 && res.success) {
        setData(res.data || {});
        const myd = {
          siqingzhufu: res.data.siqingzhufu || {},
          minitiaozhan: res.data.minitiaozhan || {},
          pintu: res.data.pintu || {},
          sibada: res.data.sibada || {},
        };
        setList([
          {
            img: my_1,
            name:
              "司庆祝福点赞量" +
              (myd.siqingzhufu.total ? ": " + myd.siqingzhufu.total : ""),
          },
          {
            img: my_2,
            name:
              "互动-mini挑战赛排序" +
              (myd.minitiaozhan.ranking ? ": " + myd.minitiaozhan.ranking : ""),
          },
          {
            img: my_3,
            name:
              "互动-拼图挑战赛排名" +
              (myd.pintu.ranking ? ": " + myd.pintu.ranking : ""),
          },
          {
            img: my_4,
            name:
              "线下斯巴达挑战赛排名" +
              (myd.sibada.ranking ? ": " + myd.sibada.ranking : ""),
            chenhgji: myd.sibada.grade ? "成绩: " + myd.sibada.grade : "",
          },
        ]);
      }
    });
  };
  useEffect(() => {
    onIifo();
  }, []);
  return (
    <div className="home my">
      <div className="ban1">
        <img className="my_top" src={my_top} />
        <img className="top1" src={imgS[UserImg(data.name)]} />
        <div className="user_name">{data.ad}</div>
      </div>
      <div className="home_main my_main">
        <div className="home_con">
          <div className="my_con_all">
            {list?.map((item, index) => {
              return (
                <div key={index}>
                  <img onClick={() => {}} src={item.img} />
                  <div className={"zhi zhi" + index} style={{ textAlign: "left" }}>
                    {item.name}
                    {item.chenhgji && <div style={{ textAlign: "left" }}>{item.chenhgji}</div>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <Nav></Nav>
      {kuang && ( // 弹窗 （满屏 jieshao | 中屏 jieshaoC）
        <div className="jieshao_box">
          <div className="back">
            <img
              onClick={() => {
                setKuang(false);
              }}
              src={X}
            />
          </div>
          <div className="jieshao">
            <img src={kuang.kuang} />
          </div>
        </div>
      )}
    </div>
  );
}

export default Home;
